<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心拖尾</title>
    <style>
        /* 定义爱心的样式 */
        .heart {
            width: 10px;
            height: 10px;
            position: fixed;
            background: #f00;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            animation: fadeOut 1s ease-out forwards;
        }

        .heart:after,
        .heart:before {
            content: '';
            width: inherit;
            height: inherit;
            background: inherit;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            position: absolute;
        }

        .heart:after {
            top: -5px;
        }

        .heart:before {
            left: -5px;
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
                transform: scale(1.5);
            }
        }
    </style>
</head>



<body>
    <script>
        // 存储所有爱心元素的数组
        const hearts = [];

        // 监听鼠标移动事件
        document.addEventListener('mousemove', function (event) {
            // 创建爱心元素
            const heart = document.createElement('div');
            heart.classList.add('heart');
            // 设置爱心的初始位置
            heart.style.left = event.clientX + 'px';
            heart.style.top = event.clientY + 'px';
            // 设置随机颜色
            heart.style.backgroundColor = getRandomColor();
            document.body.appendChild(heart);
            hearts.push(heart);

            // 一段时间后移除爱心元素
            setTimeout(() => {
                document.body.removeChild(heart);
                const index = hearts.indexOf(heart);
                if (index !== -1) {
                    hearts.splice(index, 1);
                }
            }, 1000);
        });

        // 生成随机颜色的函数
        function getRandomColor() {
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);
            return `rgb(${r}, ${g}, ${b})`;
        }
    </script>
</body>
</html>